ホームに戻る
関連 :
Canvas Grid
目次 :

コントロールを重ねて描く

Canvas や Grid を用いると、コントロールを重ねて表示することができる。
このとき、Panel.ZIndex の値が大きいものが手前に表示される
画像

Canvas を用いる場合

<Canvas> <!-- 矩形(赤) : 左上端と幅、高さを指定 --> <Rectangle Canvas.Left="20" Canvas.Top="20" Width="100" Height="100" Fill="Red" Panel.ZIndex="0"/> <!-- 矩形(青) : 左下端と幅、高さを指定 --> <Rectangle Canvas.Left="20" Canvas.Bottom="30" Width="100" Height="100" Fill="Blue" Panel.ZIndex="2"/> <!-- 矩形(黄) : 右下端と幅、高さを指定 --> <Rectangle Canvas.Right="100" Canvas.Bottom="100" Width="100" Height="100" Fill="Yellow" Panel.ZIndex="1"/> </Canvas>
画像
最も ZIndex が大きい青の矩形が最も手前に、続いて黄、赤の順で表示される。

Grid を用いる場合

<Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <!-- コントロール#1 : 奥に表示( Panel.ZIndex="0" ) --> <Button Grid.Row="0" Grid.Column="0" Panel.ZIndex="0"/> <!-- コントロール#2 : 手前に表示( Panel.ZIndex="1" ) --> <Label Grid.Row="0" Grid.Column="0" Panel.ZIndex="1"/> </Grid>
Grid は複数のコントロールを同一の枠( Row および Column が共通)に配置することが可能で、その場合コントロールは重ねて描画される。